<template>
  <div class="todo-item">
    <div class="todo-header"> {{ title }}: {{ status ? '是' : '否' }} </div>
    <div class="todo-body">
      <div class="body-item">
        {{ descList[0] }}
        <span class="num">{{ value }}</span>
        {{ descList[1] }}。
      </div>
    </div>
  </div>
  <a-divider v-if="showDivider" />
</template>

<script setup lang="ts">
  const props = defineProps({
    title: String,
    status: Boolean,
    desc: {
      type: String,
      default: '',
    },
    value: [String, Number],
    showDivider: {
      type: Boolean,
      default: true,
    },
  })

  const descList = props.desc.split('{X}')
</script>

<style lang="less" scoped>
  .service-config-wrapper {
    padding: 0 20px;
    .todo-item-box {
      .todo-item {
        .todo-header {
          font-size: 14px;
          font-weight: 600;
          color: #1d2129;
        }
        .todo-body {
          width: 100%;
          background: rgba(247, 248, 250, 0.5);
          padding: 20px 20px;
          margin-top: 8px;

          .body-item {
            margin-bottom: 12px;
            &:last-child {
              margin-bottom: 0;
            }
          }

          .num {
            color: #1890ff;
            font-weight: 600;
          }
        }
      }
    }
  }
  .gray {
    color: #4e5969;
  }
</style>
